<template>
  <div class="mod-sku">
    <data-table :criterias="criterias" name="sku" :selection="false" :initLoad="true" url="/product/sku/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <dt-search-item label="商品分类" prop="categoryIds">
          <category-cascader v-model="criterias.categoryIds" />
        </dt-search-item>
        <dt-search-item label="品牌名称" prop="categoryId">
          <brand-select v-model="criterias.brandId" :category-id="criterias.categoryId" />
        </dt-search-item>
        <dt-search-item label="商品价格" prop="price">
          <el-col :span="11">
            <el-input-number v-model="criterias.price.value[0]" :precision="2" :min="0" controls-position="right" />
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input-number v-model="criterias.price.value[1]" :precision="2" :min="0" controls-position="right" />
          </el-col>
        </dt-search-item>
        <dt-search-item label="商品名称" prop="name">
          <el-input v-model="criterias.name.value" clearable maxlength="50"></el-input>
        </dt-search-item>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed type="expand">
        <template #default="props">
          <el-descriptions :column="2" border>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 商品名称 </template>
              {{ props.row.name }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 商品标题 </template>
              {{ props.row.title }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 介绍描述 </template>
              {{ props.row.desct }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 副标题 </template>
              {{ props.row.subtitle }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 商品价格 </template>
              {{ props.row.price }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label-align="right">
              <template #label> 销量 </template>
              {{ props.row.sales }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column fixed prop="id" align="center" label="SKUID" width="200" />
      <el-table-column fixed prop="name" show-overflow-tooltip align="left" label="SKU名称" width="260" />
      <el-table-column prop="title" show-overflow-tooltip align="left" label="SKU标题"  width="320" />
      <el-table-column prop="defaultImage" align="center" label="默认图片" width="100">
        <template #default="scope">
          <el-image v-if="scope.row.defaultImage" :src="scope.row.defaultImage" fit="fill" :preview-src-list="[scope.row.defaultImage]" style="width: 40px; height: 40px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" align="right" label="价格" width="100" />
      <el-table-column prop="sales" align="right" label="销量" width="100" />
      <el-table-column fixed="right" header-align="center" align="center" width="220" label="操作">
        <template #default="scope">
          <div class="sku-op-cell">
            <el-button link type="primary" v-if="admin.isAuth('product:sku:preview')" @click="() => ElMessage.error('暂未实现~')">预览 </el-button>
            <el-button link type="primary" v-if="admin.isAuth('product:sku:comment')" @click="() => ElMessage.error('暂未实现~')">评论 </el-button>
            <el-dropdown
              v-if="
                admin.isAuth('product:sku:upload-images') ||
                admin.isAuth('product:sku:seckill-settings') ||
                admin.isAuth('product:sku:reduction-settings') ||
                admin.isAuth('product:sku:discount-settings') ||
                admin.isAuth('product:sku:member-price-settings') ||
                admin.isAuth('product:sku:stock-settings') ||
                admin.isAuth('product:sku:coupon-settings')
              "
              @command="() => ElMessage.error('暂未实现~')"
              style="margin-left: 12px;"
            >
              <span class="el-dropdown-link">
                <el-button link type="primary" v-if="admin.isAuth('product:sku:comment')" @click="() => ElMessage.error('暂未实现~')">
                  更多<icon-svg name="xiajiantou"></icon-svg>
                </el-button>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:uploadImages')" command="uploadImages">上传图片</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:seckillSettings')" command="seckillSettings">参与秒杀</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:reductionSettings')" command="reductionSettings">满减设置</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:discountSettings')" command="discountSettings">折扣设置</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:memberPriceSettings')" command="memberPriceSettings">会员价格</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:stockSettings')" command="stockSettings">库存管理</el-dropdown-item>
                  <el-dropdown-item v-if="admin.isAuth('product:sku:couponSettings')" command="couponSettings">优惠劵</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </data-table>
  </div>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import { ElMessage } from "element-plus";
import { watch, reactive } from "vue";
import BrandSelect from "../common/brand-select.vue";
import CategoryCascader from "../common/category-cascader.vue";

// 查询条件
const criterias = reactive({
  categoryId: "",
  categoryIds: [],
  brandId: "",
  price: {
    type: "bt",
    value: [0, 0],
  },
  name: {
    type: "ll",
    value: "",
  },
});

// 监控商品分组级联选择
watch(() => criterias.categoryIds, (val) => {
  if (val && val.length > 0) {
    criterias.categoryId = val[val.length - 1];
  }
});
</script>

<style lang="scss">
.sku-op-cell {

  span {
    display: block !important;
  }
}
</style>
